/**
 * @author lulongwen
 * Date: 2023-08-27 17:01
 * Description:
 */
import { memo, useState } from 'react';
import { Handle, Position, NodeToolbar } from 'reactflow';

const TooltipNode = ({ data }: any) => {
  const [visible, setVisible] = useState(false);

  return (
    <div
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      <NodeToolbar
        isVisible={visible}
        position={data.toolbarPosition}
      >
        <div>自定义 tooltip</div>
      </NodeToolbar>

      <div style={{ padding: 20 }}>{data.label}</div>
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </div>
  );
};

export default memo(TooltipNode);
